<template>
	<el-container class="cont">
		<el-aside width="256px" class="scroll-style">
			<el-row>
				<el-col :span="24" class="menu-style">
					<div class="menu-tl">
						<i class="el-icon-monitor"></i>
						<span>博学知识付费运营后台</span>
					</div>
					<el-menu default-active="1-1" router>
						<el-submenu index="1">
							<template slot="title">
								<i class="el-icon-s-home"></i>
								<span>系统首页</span>
							</template>
							<el-menu-item index="1-1" :route="{ path: '/home' }">
								系统首页
							</el-menu-item>
						</el-submenu>
						<el-submenu index="2">
							<template slot="title">
								<i class="el-icon-menu"></i>
								<span>课程管理</span>
							</template>
							<el-menu-item index="2-1"> 直播 </el-menu-item>
							<el-menu-item index="2-2"> 文图课程 </el-menu-item>
							<el-menu-item index="2-3"> 视频课程 </el-menu-item>
							<el-menu-item index="2-4" :route="{ path: '/home/AudioCourse' }">
								音频课程
							</el-menu-item>
							<el-menu-item index="2-5"> 专栏课程 </el-menu-item>
							<el-menu-item index="2-6"> 课程分类 </el-menu-item>
						</el-submenu>
						<el-submenu index="3">
							<template slot="title">
								<i class="el-icon-shopping-cart-2"></i>
								<span>实物商品</span>
							</template>
							<el-menu-item index="3-1"> 商品管理 </el-menu-item>
						</el-submenu>
						<el-submenu index="4">
							<template slot="title">
								<i class="el-icon-user"></i>
								<span>用户管理</span>
							</template>
							<el-menu-item index="4-1"> 用户查询 </el-menu-item>
							<el-menu-item index="4-2"> 用户标签 </el-menu-item>
							<el-menu-item index="4-3"> 免费会员等级管理 </el-menu-item>
							<el-menu-item index="4-4"> 付费会员卡管理 </el-menu-item>
							<el-menu-item index="4-5"> 会员权益 </el-menu-item>
							<el-menu-item index="4-6"> 积分规则 </el-menu-item>
							<el-menu-item index="4-7"> 成长值规则 </el-menu-item>
						</el-submenu>
						<el-submenu index="5">
							<template slot="title">
								<i class="el-icon-s-order"></i>
								<span>订单管理</span>
							</template>
							<el-menu-item index="5-1"> 订单查询 </el-menu-item>
						</el-submenu>
						<el-submenu index="6">
							<template slot="title">
								<i class="el-icon-s-data"></i>
								<span>数据分析</span>
							</template>
							<el-menu-item index="6-1"> 数据概况 </el-menu-item>
							<el-menu-item index="6-2"> 流量分析 </el-menu-item>
							<el-menu-item index="6-3"> 学习分析 </el-menu-item>
							<el-menu-item index="6-4"> 直播分析 </el-menu-item>
						</el-submenu>
						<el-submenu index="7">
							<template slot="title">
								<i class="el-icon-bank-card"></i>
								<span>资产管理</span>
							</template>
							<el-menu-item index="7-1"> 资产管理 </el-menu-item>
						</el-submenu>
						<el-submenu index="8">
							<template slot="title">
								<i class="el-icon-s-marketing"></i>
								<span>营销管理</span>
							</template>
							<el-menu-item index="8-1"> 优惠券 </el-menu-item>
							<el-menu-item index="8-2"> 限时折扣 </el-menu-item>
							<el-menu-item index="8-3"> 满减满折 </el-menu-item>
							<el-menu-item index="8-4"> 秒杀 </el-menu-item>
							<el-menu-item index="8-5"> 满包邮 </el-menu-item>
							<el-menu-item index="8-6"> 满赠 </el-menu-item>
							<el-menu-item index="8-7"> 拼团 </el-menu-item>
							<el-menu-item index="8-8"> 套餐 </el-menu-item>
							<el-menu-item index="8-9"> 场景营销 </el-menu-item>
						</el-submenu>
						<el-submenu index="9">
							<template slot="title">
								<i class="el-icon-setting"></i>
								<span>设置</span>
							</template>
							<el-menu-item index="9-1"> Banner图管理 </el-menu-item>
							<el-menu-item index="9-2"> 员工管理 </el-menu-item>
							<el-menu-item index="9-3"> 角色管理 </el-menu-item>
							<el-menu-item index="9-4"> 操作日志 </el-menu-item>
							<el-menu-item index="9-5"> 个人信息 </el-menu-item>
						</el-submenu>
					</el-menu>
				</el-col>
			</el-row>
		</el-aside>
		<el-container>
			<el-header height="56px" class="header-bg">
				<el-row type="flex" justify="end" align="middle" style="height: 56px">
					<el-col :span="2">
						<div class="user-info">
							<el-avatar :size="32" src="" @error="true">
								<img
									src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
							</el-avatar>
							<span>博学</span>
						</div>
					</el-col>
				</el-row>
			</el-header>
			<el-main class="main-bg">
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import AccessLayer from "../components/AccessLayer.vue";
export default {
	components: { AccessLayer },
	data() {
		return {};
	},
};
</script>

<style scoped lang="less">
.header-bg {
	background-image: linear-gradient(
		91.687deg,
		rgb(0, 110, 255) 40%,
		rgb(24, 144, 255) 100%
	);
}
.main-bg {
	background-color: #f0f2f5;
}
.cont {
	height: 100vh;
	width: 100%;
}
.scroll-style::-webkit-scrollbar {
	width: 5px;
	background-color: #f1f1f1;
}
.scroll-style::-webkit-scrollbar-track {
	background: rgb(239, 239, 239);
	border-radius: 2px;
}
.scroll-style::-webkit-scrollbar-thumb {
	background: #bfbfbf;
	border-radius: 10px;
}
.menu-tl {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 15px 0px;
	i {
		width: 32px;
		height: 32px;
		background-color: #0a7dff;
		border-radius: 50%;
		color: white;
		text-align: center;
		line-height: 32px;
		margin: 0px 10px;
	}
	span {
		color: #0a7aff;
	}
}
.user-info {
	display: flex;
	align-items: center;
	span {
		margin-left: 10px;
		color: white;
	}
}
</style>
